<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core"
      >
<h:head>
        <title>Wallet King - Login</title>
        <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                if(typeof(args) != "undefined"){
	                if(!args.validationFailed ) {  
	                    jQuery('#dialog').effect("shake", { times:3 }, 100);  
	                }
	            }
                blockUILogin.unblock();
            }  
        </script>
        <h:outputStylesheet name="css/style.css" library="default" />
		<h:outputScript name="js/sitescript.js" library="default" />
</h:head>

<h:body onload="dlg.show()">
	<p:growl id="growl" />
	
	<p:dialog closable="false" resizable="false" widgetVar="dlg" draggable="false">
		<div id="container">
			<a class="hiddenanchor" id="toregister"></a>
    		<a class="hiddenanchor" id="tologin"></a>
    		
			<div id="login_wrapper">
				<h:form id="form">
					<p:messages autoUpdate="false" />
					<p:focus />
					
					<p:panelGrid id="loginPanel">
						<f:facet name="header">
							<p:row>
								<p:column colspan="2">Login</p:column>
							</p:row>
						</f:facet>
						<f:facet name="footer">
							<p:row>
								<p:column colspan="2" style="text-align:right">
									Not yet a memeber ?
	                    				<a href="#tologin" class="to_register"> Register account </a>
								</p:column>
							</p:row>
						</f:facet>
						
						<p:row>
							<p:column>
								<h:outputLabel for="username" value="Username" />
							</p:column>
							<p:column>
								<p:inputText id="username" value="#{secureUser.username}" required="true" label="username" autocomplete="false" />	
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="password" value="Password" />
							</p:column>
							<p:column>
								<p:password id="password" value="#{secureUser.password}" required="true" label="password"  autocomplete="false"/>							
							</p:column>
						</p:row>
						<p:row>
							<p:column colspan="2">
								<p:commandButton id="loginButton" value="Login" update=":growl"
												action="#{secureUser.login}"
												onstart="blockUILogin.block();"
												oncomplete="handleLoginRequest(xhr, status, args);" 
												disabled="#{param['locked'] eq 'true'}"
												/>
							</p:column>
						</p:row>
						
					</p:panelGrid>
					
					<h:outputText value="Session expired! Please re-login" rendered="#{param['expired'] eq 'true'}"  />
					<h:outputText value="Your account is locked!"  rendered="#{param['locked'] eq 'true'}"  />
					
					<pe:blockUI target="loginPanel" widgetVar="blockUILogin">
						LOADING<br />
						<p:graphicImage library="default" name="img/ajax-loader.gif"/>
					</pe:blockUI>
				</h:form>
			</div>
			<div id="register" class="animate form">
				<h:form id="frmRegister">
					<p:messages autoUpdate="false"/>
					<p:panelGrid>
						<f:facet name="header">
							<p:row>
								<p:column colspan="2">Register</p:column>
							</p:row>
						</f:facet>
						<f:facet name="footer">
							<p:row>
								<p:column colspan="2" style="text-align:right">
									Already a member
	                    				<a href="#tologin" class="to_login"> Go and log in </a>
								</p:column>
							</p:row>
						</f:facet>
						
						<p:row>
							<p:column>
								<h:outputLabel for="reg_title" value="Title" />
							</p:column>
							<p:column>
								<p:selectOneMenu id="reg_title" value="#{registerBean.title}">  
						            <f:selectItem itemLabel="" itemValue="" />  
						            <f:selectItem itemLabel="Mr" itemValue="Mr." />  
						            <f:selectItem itemLabel="Ms." itemValue="Ms." />  
						            <f:selectItem itemLabel="Mrs." itemValue="Mrs." />  
					        	</p:selectOneMenu>  
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="reg_username" value="Email" />
							</p:column>
							<p:column>
								<p:inputText id="reg_username" value="#{registerBean.username}" required="true" label="username" autocomplete="false">
									<!-- <f:validator validatorId="vn.wallet.app.emailValidator" for="reg_username" />  -->
								</p:inputText>
							</p:column>
						</p:row>
						<p:row>	
							<p:column>
								<h:outputLabel for="pwd1" value="Password" />
							</p:column>
							<p:column>
								<p:password id="pwd1" value="#{registerBean.password}" required="true" label="password" autocomplete="false" match="pwd2">
									<f:validateLength minimum="6" maximum="20" />
								</p:password>
							</p:column>
						</p:row>
						<p:row>		
							<p:column>
								<h:outputLabel for="pwd2" value="Password *" />
							</p:column>
							<p:column>
								<p:password id="pwd2" value="#{registerBean.password}" required="true" label="password confirm" autocomplete="false" />
							</p:column>
						</p:row>
						<p:row>		
							<p:column>
								<h:outputLabel for="reg_currency" value="Currency" />
							</p:column>
							<p:column>
								<p:selectOneMenu id="reg_currency" value="#{registerBean.selectedCurrencyID}">  
						            <f:selectItems value="#{registerBean.lstCurrency}" var="cur" itemLabel="#{cur.symbol} - #{cur.name}" itemValue="#{cur.id}"/>
					        	</p:selectOneMenu>  
							</p:column>
						</p:row>
						<!-- 
						<p:row>
							<p:column>
								<h:outputLabel for="reg_captcha" value="Captcha" />
							</p:column>
							<p:column>
								<p:captcha id="reg_captcha" label="Captcha" language="tr" theme="white" required="true"/>
							</p:column>		
							<p:column>
								<p:message for=""></p:message>
							</p:column>				
						</p:row>
						 -->
						<p:row>
							<p:column colspan="2">
								<p:commandButton id="RegisterButton" value="Register" widgetVar="btnRegister"
												action="#{registerBean.saveItem}"
												onstart="$(this).attr('disabled', 'disabled');"
												oncomplete="$(this).attr('disabled', '');" 
												/>
							</p:column>
						</p:row>  
					</p:panelGrid>
				</h:form>
	        </div>
		</div>
	</p:dialog>
		
</h:body>
</html>